/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/05/02
 *@description  timeline-item  component 时间轴条目组件
 */

/**
 * #item
 *
 * @type        aty-timeline-item
 * @cn            时间轴条目
 * @menu        数据
 * @stPlugin    false
 * @stContainer true
 * @parents    [aty-timeline]
 */

// 扩展属性
/**
 * #extendproperty
 *
 * @name    slot
 * @cn      slot插槽
 * @options [dot]
 * @type    list
 * @description  dot插槽，slot=dot    <aty-icon type="trophy" slot="dot"></aty-icon>
 */
import config from '../../../../config/config.js'

// prefix
const prefixCls = config.prefix + '-timeline'
// module
const module = {
  name: prefixCls + '-item',
  components: {},
  props: {
    /**
     * #property
     *
     * @name    color
     * @cn      圆圈颜色，
     * @type    string
     * @value    blue
     * @description 圆圈颜色，可选值为blue、red、green，或自定义色值
     */
    color: {
      type: String,
      default: 'blue'
    }
  },
  watch: {},
  data () {
    return {
      dot: false
    }
  },
  computed: {
    headClasses () {
      return [
        `${prefixCls}-item-head`,
        {
          [`${prefixCls}-item-head-custom`]: this.dot,
          [`${prefixCls}-item-head-${this.color}`]: this.headColorShow
        }
      ]
    },
    headColorShow () {
      return this.color == 'blue' || this.color == 'red' || this.color == 'green'
    },
    customColor () {
      let style = {}
      if (this.color) {
        if (!this.headColorShow) {
          style = {
            color: this.color,
            'border-color': this.color
          }
        }
      }
      return style
    }
  },
  mounted () {
    this.dot = !!this.$refs.dot.innerHTML.length
  }
}
export default module
